@import './size.scss';
@import './color.scss';

*{
  padding : 0;
  margin : 0;
}

.h1 {
  font-family : PingFangSC-Semibold;
  font-size : 50px;
  font-style : normal;
  font-weight : 600;
  font-stretch : normal;
  line-height : 1.2;
  letter-spacing : normal;
}

.h2 {
  font-family : PingFangSC-Semibold;
  font-size : 40px;
  font-style : normal;
  font-weight : 600;
  font-stretch : normal;
  line-height : 1.25;
  letter-spacing : normal;
}

.h3 {
  font-family : PingFangSC-Regular;
  font-size : 25px;
  font-style : normal;
  font-weight : normal;
  font-stretch : normal;
  line-height : 1.5;
  letter-spacing : normal;
}

.text {
  font-family : PingFangSC-Regular;
  font-style : normal;
  font-weight : 600;
  font-stretch : normal;
  line-height : 1.5;
  color :$black;
  letter-spacing : normal;
}

/* title */
.titleText {
  font-family : PingFangSC-Regular;
  font-size : 30px;
  font-style : normal;
  font-weight : 600;
  font-stretch : normal;
  color : $black;
  letter-spacing : normal;
  cursor : pointer;
  
}

.subTitleText{
  width : 220px;
  height : 24px;
  font-family :PingFangSC-Regular;
  font-size : 16px;
  font-style : normal;
  font-weight : normal;
  font-stretch : normal;
  line-height : 1.5;
  color : #797979;
  letter-spacing : normal;
}

/**横向布局**/

.containerRow {
  display : flex;
  flex-direction : row;
}

/**横向左右布局**/

.containerBetween {
  display : flex;
  flex-direction : row;
  justify-content : space-between;
}

/**横向居中布局**/

.containerRowCenter {
  display : flex;
  flex-direction : row;
  justify-content : center;
}

.containerRowAlign {
  display : flex;
  flex-direction : row;
  align-items : center;
}

/**纵向布局**/

.containerCol {
  display : flex;
  flex-direction : column;
}

/**垂直居中，水平居中**/

.verticalhorizontally {
  align-items : center;
  justify-content : center;
}

.vertical {
  align-items : center;
}

.horizontally {
  justify-content : center;
}

.space-between {
  justify-content : space-between;
}

// =============================================
/* 居中box */
.center-box {
  display : flex;
  align-items : center;
  justify-content : center;
  width : 100%;
  height : calc(100vh - #{$header-height} - 53px);
}

/* 输入box */
.input-box{
  display : flex;
  flex-direction : row;
  justify-content : space-between;
}

.input-box-two{
  align-items : center;
  width : 370px;
 //  background-color : rgb(238, 53, 53);
}
.input-title{
  @extend .h3;// 最后一行俩端对齐
  
}

.input{
  width : 300px;
  @extend .h3;
  margin-left : 25px;
  line-height : 1.5;
  text-align : center !important;
  background-color : transparent;
  border-bottom : 2px solid $black;
}

.normal-btn{
    height : 30px;
    padding : 5px 18px;
    font-size : 14px;
    color : white;
    background : $black;
    border : 0;
    border-radius : 25px;
}

.cursor{
  cursor : pointer;
}

/* modal */
.modal-box{
    
  position : relative;
  height :100%;
}

.modal-btn{

  margin-bottom : 40px;
}

.modal-message{
  padding : 40px 40px 0 40px;
  word-break : break-all;
  white-space : normal;
}

// 菜单页面的单个盒子布局

.rest-tab {
  position : relative;
  width : 30%;
  height : auto;
  margin-top : 30px;
  margin-left : 30px;
  line-height : 1;
  word-break : break-all;
  word-wrap : break-word;
  // background-color : aquamarine;
}

.rest-box {
    min-width : 250px;
    max-width : 250px;
    min-height : 440px;
    max-height : 600px;
    padding : 20px;
    margin-bottom : 91px;
    -webkit-column-break-inside : avoid;
    break-inside : avoid;
    // background-color : aquamarine;
    
}

.img-box, .rest-box {
  width : 100%;
  height : 100%;
}
.img-box {
  position : relative;
  min-height : 285px;
  max-height : 390px;
  // padding-bottom : 20px;
  margin-top : 10px;
  cursor : pointer;
  // background-color : blueviolet;

}

.dish-image {
  position : absolute;
  z-index : 1;
  width : 100%;

}

.rest-image-box {
  position : relative;
  margin-top : 10px;
}

.img-box-1{
  width : 65.2%;
  cursor : pointer;
}

.img-box-2 {
  position : absolute;
  top : 140px;
  left : 45.6%;
  width : 40.9%;
}

.img-box-3 {
  position : relative;
  top : 190px;
  left : 22px;
  width : 32.6%;
}

.rest-food-name {
  width : 100%;
  height : auto;
  font-family : PingFangSC-Regular;
  font-size : 14px;
  font-style : normal;
  font-weight : 400;
  font-stretch : normal;
  line-height : 1;
  color : #afafaf;
  text-align : center;
  letter-spacing : normal;
  word-break : break-all;
  word-wrap : break-word;
  cursor : pointer;
  opacity : 1;
}

.food-image {
  position : absolute;
  z-index : 2;
  width : 100%;
}

.right-container-width{
  width : 1440px;
}
.underline{
  width : 37px;
  margin-top : 4px;
  border : 4px solid black;
}

.rest-container{
  position : relative;
  display : flex;
  flex-wrap : wrap;
  width : 68%;
  // background-color : rgb(226, 192, 43); 
}

.every-bigbox{
  width : 450px;
  height : 475px;
  /* background-color : rgb(8, 250, 0); */
}

.every-bigbox:nth-child(odd){
margin-bottom : 160px;
}

.every-bigbox:nth-child(even){
margin-top : 160px;
}

.activeBoxShadow{
box-shadow : 0px 1px 15px rgba(155, 154, 154, 0.472);
}

.activeTrans{
transition-duration : 0.3s;
transform : translate(35px, 5px);

}

//* orderlist 页面
.order-list {
  position : relative;
  display : grid;
  grid-template-columns : 33% 33% 33%;
  grid-row-gap : 30px;
  width : 100%;
  // background-color : rgb(108, 108, 255);
}

  .order-list>* {
    align-self : start;
    justify-self : center;
  }

.order-item-box {
  position : relative;
  box-sizing : border-box;
  width : 220px;
  height : 390px;
  padding : 10px 20px;
  overflow : hidden;
  background-color : #f7f7f7;
  // background-color : chartreuse;
  border : 1px solid #afafaf;
  border-radius : 5px;
  transition : all .5s ease;
}

.order-title {
  padding-bottom : 10px;
  margin-bottom : 10px;
  border-bottom : 1px solid #afafaf;
}

.h3, .input, .input-title, .order-title {
  font-family : PingFangSC-Regular;
  font-size : 25px;
  font-weight : 400;
  line-height : 1.5;
}

.h1, .h3, .input, .input-title, .order-title {
  font-style : normal;
  font-stretch : normal;
  letter-spacing : normal;
}

.order-items {
  height : 160px;
overflow : auto;
}

.titleText {
  font-size : 30px;
  cursor : pointer;
}

.text, .titleText {
  font-family : PingFangSC-Regular;
  font-style : normal;
  font-weight : 600;
  font-stretch : normal;
  color : #202020;
  letter-spacing : normal;
}

.order-item-name {
  overflow : hidden;
  text-align : center;
  white-space : nowrap;
}

.cart-item-name, .cart-item-price {
  font-size : 16px;
  font-style : normal;
  font-weight : 400;
  font-stretch : normal;
  line-height : 30px;
  color : #202020;
  letter-spacing : normal;
}

.cart-item-name {
  flex : 1 1;
}

.order-footer {
  border-top : 1px solid #afafaf;
}

.order-total {
  border-top : none;
}

.menu-cart-total, .order-total {
  padding-top : 10px;
  padding-bottom : 15px;
  font-size : 24px;
  line-height : 1.5;
  color : #202020;
}

.more-btn {
  margin-top : 15px;
}

.normal-btn {
  height : 30px;
  padding : 5px 18px;
  font-size : 14px;
  color : #fff;
  background : #202020;
  border : 0;
  border-radius : 25px;
}

.cart-item {
  margin-bottom : 23px;
}

.cart-item-count-no-editable {
  width : 30px;
  height : 30px;
  font-size : 15px;
  line-height : 2;
  color : #6e6e6e;
  text-align : center;
  background-color : #d8d8d8;
  border-radius : 30px;
}

// 放大
.order-item-box-expand {
  position : relative;
  z-index : 2;
  width : 350px;
  height : 590px;
}

.imgShow{
  display : none;
}

.img-style{
  width : 200px;
  height : 200px;
}

.order-total {
  border-top : none;
}

.menu-cart-total, .order-total {
  padding-top : 10px;
  padding-bottom : 15px;
  font-size : 24px;
  line-height : 1.5;
  color : #202020;
  // border-top: 1px solid #ccc;
}
.img-container{
  width : 100%;
}

.cart-item-price {
  height : 30px;
  margin-right : 5px;
}